<template>
	<!-- 作品列表 -->
	<Top-Page class="works-box">
		<NavBar
			title=""
			:class="navBar_class"
			left-arrow
			rightMore
			@click-left="navBack"
			@click-right="show = !show"
			style="box-shadow: none"
		>
			<template #right>
				<image v-if="scrollTop < 240" class="h-50" src="/static/image/common/w-more.png" mode="heightFix"></image>
				<image v-else class="h-50" src="/static/image/common/more.png" mode="heightFix"></image>
			</template>
		</NavBar>
		<view :style="{ height: minImgHeight + 'rpx' }" class="user-info-box" @click="minImgClick">
			<view
				v-if="isMinImgClick"
				class="flex flex-direction items-center"
				style="position: absolute; right: 30rpx; bottom: 30rpx; z-index: 10"
				@click.stop="changeMinImg"
			>
				<image class="w-48 h-48" src="/static/image/common/pic.png" />
				<text class="fs-24 mt-8 block" style="color: #fff">换封面</text>
			</view>
			<image v-if="user.chat_bg" class="user-bg_img" :src="user.chat_bg" mode="aspectFill" />
			<image v-else class="user-bg_img" :src="userBg" mode="aspectFill" />
			<view class="user-info-wrap" v-if="!isMinImgClick">
				<view class="user-info__name text-one"> {{ query.realname }} </view>
				<user-avator :width="128" :height="128" :src="query.avatar" @click.stop="toDetail(user.user_id)"></user-avator>
			</view>
		</view>

		<!-- 有人提醒你去查看 -->
		<view class="remind-list" v-if="remindList.length">
			<!-- <view class="remind-list-item" v-for="item in remindList" @click.stop="toDetailsMsg(item.trends_id)">
        <view class="remind-list-item_name">
          {{ item.realname }}
        </view>
        <view class="remind-list-item_text">{{ item.remark }}</view>
      </view> -->
			<view class="remind-list-item" @click.stop="toDetailsMsg(remindList[0].trends_id)">
				<view class="remind-list-item_name">
					{{ remindList[0].realname }}
				</view>
				<view class="remind-list-item_text">{{ remindList[0].remark }}</view>
			</view>
		</view>

		<!-- 作品列表 -->
		<view class="works-list" @click.stop="comment_show = false" v-if="works_list.length">
			<template v-for="(item, index) in works_list">
				<view
					class="works-item"
					v-if="!item.show && !hidden_list.includes(item.user_id)"
					@click.stop="toDetailsMsg(item.trends_id)"
				>
					<!-- 用户信息 -->
					<view class="works-users">
						<!-- 用户头像 -->
						<user-avator :src="item.avatar" @click.stop="toDetail(item.user_id)"></user-avator>

						<!-- 用户名字和时间 -->
						<view class="works-users-name_time">
							<view class="works-users-name" @click.stop="toDetail(item.user_id)">
								{{ item.realname }}
							</view>

							<view class="works-users-time"> {{ item.date }} </view>
						</view>
						<!-- 更多 -->
						<view
							v-if="item.user_id != user.user_id"
							class="works-users-more"
							@click.stop="changeUnit(index, item.user_id, item.trends_id)"
						>
							<!-- <view class="more-icon"></view> -->
							<image class="h-40" src="/static/image/common/more.png" mode="heightFix"></image>
						</view>
					</view>

					<!-- 作品的文字信息 -->
					<view class="works-content"> {{ item.content }} </view>

					<!-- 作品的图片信息 -->
					<view class="works-imgs" v-if="item.img && item.img.length">
						<template v-for="it in item.img">
							<image v-if="isImageOrVideo(it) === 'image'" class="works-imgs-item" :src="it" mode="aspectFill" />
							<!-- <view class="video-wrap" v-else-if="isImageOrVideo(it) === 'video'">
                <image class="works-imgs-item" :src="`${it}?vframe/jpg/offset/1`" mode="aspectFill" />
                <view class="">
                  
                </view>
              </view> -->

							<!-- 						<video
								:controls="false"
								v-else-if="isImageOrVideo(it) === 'video'"
								class="works-imgs-item"
								:src="''"
								:poster="`${it}?vframe/jpg/offset/1`"
							/> -->
							<image
								v-else-if="isImageOrVideo(it) === 'video'"
								class="works-imgs-item"
								:src="`${it}?vframe/jpg/offset/1`"
								mode="aspectFit"
							></image>
						</template>
					</view>

					<!-- 地址 / 是否点赞 -->
					<view class="works-content-toolbar-container">
						<!-- 地址 -->
						<view class="works-content-toolbar-address">
							<image
								v-if="item.location && item.location.city"
								class="works-content-toolbar-address-icon"
								src="../../../static/image/friend/location-2.png"
								mode="aspectFill"
							/>
							{{ item.location?.city ?? "" }}
						</view>

						<!-- 点赞 / 评论 / 分享 -->
						<view class="works-content-toolbar-tool">
							<image
								class="works-content-toolbar-tool-item"
								:src="`${
									item.star_mine == 1
										? '../../../static/image/friend/star-2.png'
										: '../../../static/image/friend/star.png'
								}`"
								@click.stop="changeStar(item.trends_id, index)"
								mode="aspectFill"
							/>

							<image
								class="works-content-toolbar-tool-item"
								src="../../../static/image/friend/comment.png"
								mode="aspectFill"
								@click.stop="openComment(index, item.trends_id, '', '')"
							/>

							<!--  <image
                v-if="user.user_id != item.user_id"
                @click.stop="share(item)"
                class="works-content-toolbar-tool-item"
                src="../../../static/image/friend/share.png"
                mode="aspectFill"
              /> -->
						</view>
					</view>

					<!-- 已点赞列表 -->
					<view class="works-star-list" v-if="item.star && item.star.length">
						<image class="works-star-list-icon" src="../../../static/image/friend/star-2.png" mode="aspectFill" />

						<view class="works-star-item" v-for="it in item.star" style="margin-right: 10rpx"> {{ it.realname }} </view>
					</view>

					<!-- 评论 -->
					<view class="works-comments" v-if="item.comments && item.comments.length">
						<view
							class="works-comments-1-wrap works-comments-item"
							v-for="it in item.comments"
							@click.stop="openComment(index, item.trends_id, it.comments_id, it.realname)"
						>
							<view class="works-comments_name">
								<view> {{ it.realname }}: </view>
								<view class="works-comments_reply-wrap" v-if="it.reply">
									回复
									<view class="works-comments_reply-name">
										{{ it.reply }}
									</view>
								</view>
							</view>
							<view class="works-comments_content"> {{ it.content }} </view>
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="finished-text border-bottom-after" v-if="finished">
			{{ finished_text }}
		</view>

		<!-- 右上角的更多 -->
		<Popup v-model:show="show" position="bottom" round class="more-popup-1">
			<view class="popup-more-item border-bottom-after" @click.stop="release('camera')"> 拍照 </view>
			<view class="popup-more-item border-bottom-after" @click.stop="release('album')"> 从手机相册选择 </view>
			<view class="popup-more-item border-bottom-after" @click.stop="toRemindMsgs()"> 消息列表 </view>
			<view class="popup-more-item" @click.stop="toVisitor()"> 查看我的访客 </view>
		</Popup>

		<!-- 评论框 -->
		<template v-if="comment_show">
			<Popup v-model:show="comment_show" position="bottom" round overlay-class="popup-overlay-2" class="comment-popup">
				<user-avator :width="64" :height="64" :src="query.avatar" style="margin-right: 16rpx"></user-avator>
				<textarea
					v-model="comment_value"
					placeholder="说点什么吧..."
					maxlength="120"
					auto-focus
					auto-height
					class="comment-textarea"
				/>
				<view class="send-comment" @click.stop="sendComment()">发送</view>
			</Popup>
		</template>

		<Popup v-model:show="unit_show" position="bottom" round class="more-popup-2">
			<view class="popup-more-item border-bottom-after justify-center" @click.stop="toChat()">
				<image class="more-popup--icon" src="../../../static/image/message/chat.png" mode="" />
				发起聊天
			</view>
			<view class="popup-more-item border-bottom-after justify-center" @click.stop="postCircleHide()">
				<image class="more-popup--icon" src="../../../static/image/message/conceal.png" mode="" />
				隐藏此条动态
			</view>
			<view class="popup-more-item justify-center" @click.stop="postCircleWatchcircle()">
				<image class="more-popup--icon" src="../../../static/image/message/reject.png" mode="" />
				不看TA的动态
			</view>
		</Popup>
	</Top-Page>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue"
import Popup from "@/components/Popup/Popup.vue"
import { navBack } from "@/utils/utils.js"
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
const userStore = useloginStore(pinia)
import { useFriendStore } from "@/store/friend.js"
const friendStore = useFriendStore(pinia)
import { debounce } from "@/utils/utils.js"
import { chooseFiles } from "@/utils/fileUtils.js"

export default {
	data() {
		return {
			isMinImgClick: false,
			screenHeight: uni.getSystemInfoSync().screenHeight,
			minImgHeight: 600,
			appSetting: userStore.appSetting,
			navBack: navBack,
			user: userStore.userInfo,
			show: false,
			//评论框
			comment_show: false,
			//评论文本
			comment_value: "",
			query: {},
			navBar_class: "",
			userBg: "https://mp-image.scgwlx.com/mp-image/im-default-rmq.jpg",
			name: "张三",
			index: 0,
			trends_id: 0,
			unit_user_id: 0, //不看动态-单条 ———— 的用户id
			hidden_list: [], //不看他
			unit_show: false,
			comments_id: "",
			reply: "",
			user_id: -999,
			page: 0,
			finished: false,
			finished_text: "",
			remindList: [], //提醒查看列表
			works_list: [], //作品列表
		}
	},
	components: { NavBar, Popup },
	onLoad(options) {
		Object.assign(this.query, options)

		this.user_id = options.user_id ?? 0

		this.remindList.length = 0
		this.works_list.length = 0

		//提醒列表
		this.postCircleRemind()
		// //动态列表
		this.postCircleIndex()
	},
	onShow() {
		this.remindList.length = 0
		this.works_list.length = 0
		this.page = 0
		this.finished = 0

		this.postCircleIndex()
	},
	onReachBottom() {
		this.postCircleIndex()
	},
	onPageScroll(e) {
		const scrollTop = e.scrollTop ?? 0
		this.scrollTop = scrollTop
		if (scrollTop > 240) {
			this.navBar_class = "nav-bar__2"
		} else {
			this.navBar_class = ""
		}
	},
	methods: {
		changeMinImg() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					console.log(res, "res")
					let tempPath = res.tempFilePaths[0]
					uni.uploadFile({
						url: this.$api.msgApi.uploadChatBg,
						filePath: tempPath,
						name: "file",
						header: {
							Authorization: uni.getStorageSync("authToken"),
						},
						formData: {
							ext: "png",
							// num: this.userInfoNum,
						},
						success: (e) => {
							uni.hideLoading()
							let res = JSON.parse(e.data)
							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: "none",
								})
								this.user[`chat_bg`] = res.data
								let data = JSON.parse(JSON.stringify(this.user))
								userStore.login(data)
							}
						},
						fail: (res) => {
							uni.hideLoading()
						},
					})
				},
			})
		},
		minImgClick() {
			this.isMinImgClick = !this.isMinImgClick
		},
		isImageOrVideo(url) {
			const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"]
			const videoExtensions = ["mp4", "avi", "mov", "mkv", "webm", "flv", "wmv"]

			// 提取文件扩展名
			const extension = url.split(".").pop().toLowerCase()

			if (imageExtensions.includes(extension)) {
				return "image"
			} else if (videoExtensions.includes(extension)) {
				return "video"
			} else {
				return "unknown"
			}
		},
		// onClickLeft() {
		//   console.log('点击111');
		//   navBack();
		// },
		//点赞
		changeStar(trends_id, index) {
			const star_mine = this.works_list[index]?.star_mine ?? 0
			this.works_list[index].star_mine = star_mine == 1 ? 0 : 1

			this.starApi(trends_id, index)
		},
		starApi: debounce(function (trends_id, index) {
			this.$api.friendCircleApi
				.circleStar({
					trends_id: trends_id,
				})
				.then((res) => {
					if (res.code != 0) return

					if (res.data.star == 1) {
						this.works_list[index].star.push({
							user_id: this.user.user_id,
							realname: this.user.realname,
						})
					} else {
						const ind = this.works_list[index].star.findIndex((item) => item.user_id == this.user.user_id)

						this.works_list[index].star.splice(ind, 1)
					}
				})
		}),
		//前往<用户信息>
		toDetail(user_id) {
			uni.navigateTo({
				url: `/pages/contacts/detail?id=${user_id}`,
			})
		},
		//跳转信息详情
		toDetailsMsg(id) {
			uni.navigateTo({
				url: `/pages/friend/details-msg/details-msg?trends_id=${id}`,
			})
		},
		//分享
		share(item) {
			uni.navigateTo({
				url: `/pages/message/chat?id=${item.user_id}&avatar=${item.avatar}&realname=${item.realname}&content=${
					item.content || "有新的动态发布"
				}`,
			})
		},
		//跳转聊天
		toChat() {
			uni.navigateTo({
				url: `/pages/message/chat?id=${this.unit_user_id}`,
			})
		},
		//不看动态-单条
		postCircleHide() {
			this.$api.friendCircleApi
				.circleHide({
					trends_id: this.trends_id,
				})
				.then((res) => {
					uni.showToast({
						title: `${res.msg}`,
						icon: "none",
					})

					if (res.code == 0) {
						this.works_list[this.index].show = true
						console.log(this.works_list, this.index)

						this.unit_show = false
					}
				})
		},
		//不看朋友圈-好友
		postCircleWatchcircle() {
			this.$api.friendCircleApi
				.circleWatchcircle({
					user_id: this.unit_user_id,
					type: "trends_hide_his",
					num: 1,
				})
				.then((res) => {
					uni.showToast({
						title: `${res.msg}`,
						icon: "none",
					})

					if (res.code == 0) {
						const index = this.hidden_list.indexOf(this.unit_user_id)

						index == -1 ? this.hidden_list.push(this.unit_user_id) : this.hidden_list.splice(index, 1)
						this.unit_show = false
					}
				})
		},
		//每条信息右上角的更多
		changeUnit(index, user_id, trends_id) {
			this.index = index
			this.unit_user_id = user_id
			this.unit_show = true
			this.trends_id = trends_id
		},
		//打开评论框
		openComment(index, trends_id, comments_id, realname) {
			this.comment_show = true
			this.index = index
			this.trends_id = trends_id
			this.comments_id = comments_id
			this.reply = realname
		},
		//发送评论
		sendComment() {
			this.$api.friendCircleApi
				.circleComments({
					trends_id: String(this.trends_id),
					comments_id: String(this.comments_id),
					content: this.comment_value,
				})
				.then((res) => {
					if (res.code == 0) {
						const comments = {
							content: this.comment_value,
							realname: this.user.realname,
							avatar: this.user.avatar,
							comments_id: res.data.comments_id,
							reply: this.reply,
						}

						this.works_list[this.index].comments.push(comments)

						this.comment_value = ""
					}
				})
		},
		//提醒列表
		postCircleRemind() {
			this.$api.friendCircleApi.circleRemind().then((res) => {
				const data = res.data ?? []
				this.remindList.push(...data)
			})
		},
		//前往<提醒消息列表>
		toRemindMsgs() {
			this.show = false
			uni.navigateTo({
				url: "/pages/friend/remind-msgs/remind-msgs",
			})
		},
		//拍摄 / 从手机相册选择
		async release(type) {
			this.show = false

			const files = await chooseFiles([], type)

			// 返回合法文件列表
			friendStore.changeReleaseImgs(files)

			uni.navigateTo({
				url: `/pages/friend/release-dynamic/release-dynamic`,
			})
		},
		//前往<访客>
		toVisitor() {
			this.show = false
			uni.navigateTo({
				url: "/pages/friend/visitor/visitor",
			})
		},
		//动态列表
		postCircleIndex() {
			//没有更多了
			if (this.finished) {
				uni.showToast({
					title: "没有更多了",
					icon: "error",
				})
				return
			}

			if (this.user_id === -999) {
				uni.showToast({
					title: "参数错误，请退出后重新访问",
					icon: "error",
				})
				return
			}

			this.$api.friendCircleApi
				.circleIndex({
					page: ++this.page,
					user_id: this.user_id,
				})
				.then((res) => {
					const data = res.data ?? []

					if (Array.isArray(data)) {
						if (!data.length) {
							const msg = this.page == 1 ? "暂无信息" : "没有更多了"

							this.finished_text = msg

							this.finished = true
						}

						data.length && this.works_list.push(...data)
					}
				})
		},
	},
	watch: {
		isMinImgClick: {
			handler(newVal) {
				console.log(newVal, "newVal")
				if (newVal) {
					this.minImgHeight = parseInt(this.screenHeight * 0.7) * 2
				} else {
					this.minImgHeight = 600
				}
			},
		},
	},
}
</script>

<style lang="scss" scoped>
.round-s {
	border-radius: 50%;
}
.radius-s {
	border-radius: 16rpx;
}
@import "./index.scss";
</style>
